<template>
    <div>
        <el-row>
            <el-col :span="24"><el-text class="mx-1" type="success">共有{{ list.length }}项，还剩{{ undoNum }}项</el-text></el-col>
        </el-row><br>
        <el-row>
            <el-col :span="24">
                <el-button type="success" @click="show('all')">全部</el-button>
                <el-button type="success" @click="show('done')">已完成</el-button>
                <el-button type="success" @click="show('undo')">待完成</el-button>
                <el-button type="success" @click="show('clear')">清空</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    props:{list:Array},
    computed:{
        undoNum(){
            let count = 0
            //遍历数组，统计state是false的个数
            this.list.map( v =>{
                if(v.state == false){
                    count++
                }
            })
            return count
        }
    },
    methods:{
        show(flag){
            //把对应的参数传递给父组件
            this.$emit('show',flag)
        }
    }
}
</script>